<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--第03课 1:30:00-->
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            //过滤器的作用：为页面的数据进行添油加醋的功能
            //有两种：局部过滤器 全局过滤器

            //1.声明过滤器
            //2.使用:{{数据|过滤器的名字}}

            //全局过滤器(反转字符串)
            Vue.filter('myReverse',function (value,arg) {
                return arg+value.split('').reverse().join('');
            })

            var App = {
                data(){
                    return{
                        price:0,
                        msg:'hello filter'
                    }
                },
                template: '' +
                    '<div>' +
                        '<input type="number" v-model="price"/>'+
                        '<h3>{{price|myCurrency}}</h3>' +
                        '<h4>{{msg|myReverse("哈哈哈")}}</h4>'+
                    '</div>',
                filters:{
                    //1.声明过滤器
                    myCurrency:function (value) {
                        return "￥" + value
                    }
                }
            }

            new Vue({

                el: "#app",
                components: {
                    App
                },
                template: '<App/>'
            })
        </script>
    </body>
</html>